import { useSearchParams } from '@@/exports';
import { useEffect, useState } from 'react';
import styles from './inviteUser.less';

const InviteUser = () => {
  const [searchParams] = useSearchParams();
  const [inviteUserData] = searchParams.getAll('inviteUserData');
  const [inviteUser, setInviteUser] = useState<{
    messageType: string;
    avatar: string;
    userName: string;
    meetingCode: string;
    meetingName: string;
  }>();

  useEffect(() => {
    console.log('-----------------inviteUserData:', JSON.parse(inviteUserData));
    const initUser = JSON.parse(inviteUserData);
    if (
      initUser.avatar === null ||
      initUser.avatar === '' ||
      initUser.avatar === 'null'
    ) {
      initUser.avatar = '/img/user.png';
    }
    setInviteUser(initUser);
  }, []);

  const refuseAnswer = async () => {
    window.tm!.ipcRenderer.send('close-inviteUser', {});
  };

  const answerMeeting = async () => {
    if (window.tm) {
      window.tm.ipcRenderer.send(
        'openMeet',
        'pullStream',
        inviteUser!.meetingCode,
        inviteUser!.meetingName,
      );
    } else {
      window.open('/#/meet?meetingCode=' + inviteUser!.meetingCode, '_blank');
    }
  };

  return (
    <div className={styles.bodyDiv}>
      <div className={styles.contentDiv}>
        <div className={styles.topDiv}>
          <div className={styles.topImgDiv}>
            <img src={inviteUser?.avatar} className={styles.topImg} />
          </div>
          <div className={styles.topText}>
            <span className={styles.topTextUserName}>
              {inviteUser?.userName}邀请你加入
            </span>
            <span className={styles.topTextMeetingName}>
              {inviteUser?.meetingName}
            </span>
          </div>
        </div>
        <div className={styles.downDiv}>
          <div className={styles.downButtonVideo}>
            <button className={styles.hangUpPhoneVideo} onClick={answerMeeting}>
              <img
                className={styles.hangUpPhoneVideoImg}
                src={'/img/videoCamera.png'}
              />
            </button>
            视频接听
          </div>
          <div className={styles.downButtonButton}>
            <button className={styles.hangUpPhoneButton} onClick={refuseAnswer}>
              <img
                className={styles.hangUpPhoneImg}
                src={'/img/hangUpPhone.png'}
              />
            </button>
            拒绝
          </div>
          <div className={styles.downButtonPhone}>
            <button
              className={styles.hangUpAnswerPhone}
              onClick={answerMeeting}
            >
              <img
                className={styles.hangUpAnswerPhoneImg}
                src={'/img/answerPhone.png'}
              />
            </button>
            接听
          </div>
        </div>
      </div>
    </div>
  );
};

export default InviteUser;
